<!-- @aurther daiyuhua
    @createDate 20240921 
-->

<template>
  <el-container class="login-container">
    <el-main class="login-main">
      <el-card class="login-card" shadow="always">
        <el-form
          label-width="auto"
          :model="user"
          ref="loginRule"
          :rules="loginRule"
          v-loading="loading"
          @submit.prevent="
            (event) => {
              event.preventDefault();
            }
          "
        >
          <h3 class="login-title">医院信息管理系统</h3>
          <el-form-item prop="username" label="用户名">
            <el-input
              type="text"
              class="login-input"
              v-model="user.username"
              placeholder="请输入用户名"
              clearable
              autocomplete="on"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              type="password"
              class="login-input"
              v-model="user.password"
              placeholder="请输入密码"
              clearable
              autocomplete="on"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              type="primary"
              class="login-button"
              @click="handleLogin()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
//import { Edit } from "@element-plus/icons-vue";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      loginRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
    };
  },
  methods: {
    ...mapActions(["login"]),
    handleLogin: async function () {
      // TO DO: implement login logic here
      try {
        const valid = await this.$refs.loginRule.validate(); //校验表单是否有空
        if (valid) {
          this.loading = true; //进行登录加载
          //发送登录请求
          this.$axios.post("/login", this.user).then((res) => {
            if (res.code === 200) {
              //登录成功，进行数据存储
              //console.info(res.data);
              this.login(res.data);
              //console.log(this.getUser);
              //跳转到主页
              this.$router.push("/home");
            } else {
              //console.log("login failed");
              this.$router.replace("/");
            }
          });
        } else {
          return;
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
@import url(../assets/css/reset.css);
@import url(../assets/css/login.css);
</style>